<template>
    <article class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 存量房数字及高中低价位房产分布比例（本都会区）</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <radioGroup ref="radioGroup" @radioChange="filterYearChange"></radioGroup>
                    <p>图表上的圆形标注点为历史数据最大值及最小值</p>
                    <div id="InventoryMeasure_Metro-chart" style="height: 300px;"></div>
                    <div id="Tiers_Metro-chart" style="height: 300px;"></div>
                </article>
                <h4 ref="InventoryMeasure_Metro_chart_NoData" v-show="chartNoDataShow"></h4>
                <h4 ref="Tiers_Metro_chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
            <p v-show="false">{{getzipcode}}</p>

        </div>
    </article>
</template>

<script>
    import { radioGroup } from '@/mixin/echarts_radio';//公共mixin混入——radio-group组件

    export default {
        mixins: [radioGroup],
        data() {
            return {
                InventoryMeasure_MetroMyEcharts: '',//存量房数字（本都会区）——堆叠柱状图
                Tiers_MetroMyEcharts: '',//高中低价位房产分布比例（本都会区）——柱状图
                chartNoDataShow: false, //判断是否有无数据

            }
        },
        computed: {
            //房源详情页图表使用——本房源所在邮zipcode
            getzipcode() {
                if(this.$store.getters.get_houseDetailsZipcode){
                    //获取存量房数字及高中低价位房产分布比例（本都会区）数据
                    this.get_InventoryMeasure_Tiers_Metro_Public(3);
                }
                return this.$store.getters.get_houseDetailsZipcode
            },

        },
        created() {
        },
        mounted() {
            this.InventoryMeasure_MetroMyEcharts = echarts.init(document.getElementById('InventoryMeasure_Metro-chart'));
            this.InventoryMeasure_MetroMyEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.InventoryMeasure_MetroMyEcharts.resize();
            });

            this.Tiers_MetroMyEcharts = echarts.init(document.getElementById('Tiers_Metro-chart'));
            this.Tiers_MetroMyEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.Tiers_MetroMyEcharts.resize();
            });

        },
        beforeDestroy () {
            if(this.InventoryMeasure_MetroMyEcharts || this.Tiers_MetroMyEcharts) {
                this.InventoryMeasure_MetroMyEcharts.dispose();
                this.Tiers_MetroMyEcharts.dispose();
            }
        },
        methods: {
            //获取存量房数字及高中低价位房产分布比例（本都会区）数据
            get_InventoryMeasure_Tiers_Metro_Public(filterYearValue) {
                //count：存量房数字、pct：高中低价位房产分布比例
                //存量房数字（本都会区）
                this.$get(`/analysis/inventory/count/${this.$store.getters.get_houseDetailsZipcode}`,{
                    year: filterYearValue
                }).then(res => {
                    if (res.status == 0) {
                        if(res.data == null || res.data.length == 0){
                            this.chartNoDataShow = true;
                            this.$refs.InventoryMeasure_Metro_chart_NoData.innerText = '暂未查询到数据！';
                        }else{
                            this.chartNoDataShow = false;
                            this.InventoryMeasure_Metro_charts(res.data);
                        }
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.InventoryMeasure_Metro_chart_NoData.innerText = res.msg;
                    }
                });

                //高中低价位房产分布比例（本都会区）
                this.$get(`/analysis/inventory/pct/${this.$store.getters.get_houseDetailsZipcode}`,{
                    year: filterYearValue
                }).then(res => {
                    if (res.status == 0) {
                        if(res.data == null || res.data.length == 0){
                            this.chartNoDataShow = true;
                            this.$refs.Tiers_Metro_chart_NoData.innerText = '暂未查询到数据！';
                        }else{
                            this.chartNoDataShow = false;
                            this.Tiers_Metro_charts(res.data);
                        }
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.Tiers_Metro_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //存量房数字（本都会区）——堆叠柱状图
            InventoryMeasure_Metro_charts(data) {
                this.InventoryMeasure_MetroMyEcharts.hideLoading();

                //取出数据里的时间
                let dateList = [];
                if(data.bottom != null){
                    dateList = data.bottom.map((item) =>{
                        return item.time;
                    });
                }else{
                    if(data.middle != null){
                        dateList = data.middle.map((item) =>{
                            return item.time;
                        });
                    }else{
                        if(data.top != null){
                            dateList = data.top.map((item) =>{
                                return item.time;
                            });
                        }
                    }
                }

                //高价位
                let top_valueList = null;
                if(data.top != null){
                    top_valueList = data.top.map(item => {
                        return Math.round(item.value);
                    });
                }
                //中价位
                let middle_valueList = null;
                if(data.middle != null){
                    middle_valueList = data.middle.map(item => {
                        return Math.round(item.value);
                    });
                }
                //低价位
                let bottom_valueList = null;
                if(data.bottom != null) {
                    bottom_valueList = data.bottom.map(item => {
                        return Math.round(item.value);
                    });
                }

                this.InventoryMeasure_MetroMyEcharts.setOption({
                    title: {
                        text: '存量房数字（单位：套）',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['高价位', '中价位', '低价位'],
                        top: 30,
                    },
                    xAxis: {
                        type: 'category',
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }, {
                            show: true,
                            start: 0,
                            end: 100,
                        }
                    ],
                    series: [
                        {
                            name: '高价位',
                            type: 'bar',
                            barGap: 0,
                            data: top_valueList
                        },
                        {
                            name: '中价位',
                            type: 'bar',
                            barGap: 0,
                            data: middle_valueList
                        },
                        {
                            name: '低价位',
                            type: 'bar',
                            barGap: 0,
                            data: bottom_valueList
                        }
                    ],
                    color: ['#40c3f9', '#ffbf53', '#fe5960'],
                });
            },
            //高中低价位房产分布比例（本都会区）——柱状图
            Tiers_Metro_charts(data){
                this.Tiers_MetroMyEcharts.hideLoading();

                //取出数据里的时间
                let dateList = [];
                if(data.bottom != null){
                    dateList = data.bottom.map((item) =>{
                        return item.time;
                    });
                }else{
                    if(data.middle != null){
                        dateList = data.middle.map((item) =>{
                            return item.time;
                        });
                    }else{
                        if(data.top != null){
                            dateList = data.top.map((item) =>{
                                return item.time;
                            });
                        }
                    }
                }

                //高价位
                let top_valueList = null;
                if(data.top != null){
                    top_valueList = data.top.map(item => {
                        return this.$accounting.formatMoney(item.value * 100, "", 0);
                    });
                }
                //中价位
                let middle_valueList = null;
                if(data.middle != null){
                    middle_valueList = data.middle.map(item => {
                        return this.$accounting.formatMoney(item.value * 100, "", 0);
                    });
                }
                //低价位
                let bottom_valueList = null;
                if(data.bottom != null) {
                    bottom_valueList = data.bottom.map(item => {
                        return this.$accounting.formatMoney(item.value * 100, "", 0);
                    });
                }

                this.Tiers_MetroMyEcharts.setOption({
                    title: {
                        text: '高中低价位房产分布比例（单位：%）',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['高价位', '中价位', '低价位'],
                        top: 30,
                    },
                    xAxis: {
                        type: 'category',
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: '{value}%'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }, {
                            show: true,
                            start: 0,
                            end: 100,
                        }
                    ],
                    series: [
                        {
                            name: '高价位',
                            type: 'bar',
                            barGap: 0,
                            stack: '总量',
                            label: {
                                show: true,
                            },
                            data: top_valueList,
                        },
                        {
                            name: '中价位',
                            type: 'bar',
                            barGap: 0,
                            stack: '总量',
                            label: {
                                show: true,
                            },
                            data: middle_valueList
                        },
                        {
                            name: '低价位',
                            type: 'bar',
                            barGap: 0,
                            stack: '总量',
                            label: {
                                show: true,
                            },
                            data: bottom_valueList
                        }
                    ],
                    color: ['#003366', '#006699', '#4cabce'],
                });
            },
            //接收公共mixinradio-group组件的change事件——按年份筛选
            filterYearChange(filterYearValue) {
                this.InventoryMeasure_MetroMyEcharts.showLoading();
                this.Tiers_MetroMyEcharts.showLoading();
                this.get_InventoryMeasure_Tiers_Metro_Public(filterYearValue);
            },

        },
        components: {
            radioGroup,//公共mixin混入——radio-group组件

        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
